//################################
// 版权所有：鸽子游戏俱乐部
// 系统名称：鸽子游戏俱乐部-移动版
// 文件名称：mainTabBar.js
// 创建时间：2017年04月08日
// 创建人员：Lemo
// 功能说明：app tabbar
//################################

'use strict';

import React, {Component, PropTypes} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableWithoutFeedback,
} from 'react-native';

import Images from '../../images';
import Colors from '../../common/colors';
import UIConstants from '../../common/uiconstants';
import FontSizes from '../../common/fontSizes';
import {
    CommonData,
} from '../../common';

class MainTabBar extends Component {
    static propTypes = {
		goToPage: React.PropTypes.func,
        activeTab: React.PropTypes.number,
        tabs: React.PropTypes.array,
	}

    constructor(props) {
        super(props);
    }

    onPress(i) {
        if (this.props.activeTab !== i) {
            this.props.goToPage(i);
        }
    }

    render() {
        return (
            <View style={[styles.tabs, this.props.style, ]}>
                {
                    this.props.tabs.map((tab, i) => {
                        var icon;
                        switch (tab) {
                            case UIConstants.main.rent_game:
                                if (this.props.activeTab === i) {
                                    icon = Images.HomeActive;
                                }
                                else {
                                    icon = Images.HomeInactive;
                                }
                                break;
                            case UIConstants.main.return_game:
                                if (this.props.activeTab === i) {
                                    icon = Images.ContactsActive;
                                }
                                else {
                                    icon = Images.ContactsInactive;
                                }
                                break;
                            case UIConstants.main.others:
                                if (this.props.activeTab === i) {
                                    icon = Images.TodoActive;
                                }
                                else {
                                    icon = Images.TodoInactive;
                                }
                                break;
                            case UIConstants.main.my:
                                if (this.props.activeTab === i) {
                                    icon = Images.MyActive;
                                }
                                else {
                                    if (CommonData.pwdExpireRemainDays === 0) {
                                        icon = Images.MyInactive;
                                    }
                                    else {
                                        icon = Images.MyInactiveWithBadge;
                                    }
                                }
                                break;
                        }

                        return (
                            <TouchableWithoutFeedback key={tab} onPress={() => this.onPress(i)} style={styles.tab}>
                                <View style={styles.innerview}>
                                    <Image source={icon} style={styles.icon} resizeMode={Image.resizeMode.contain} />
                                    <Text style={[styles.text, {color: this.props.activeTab === i ? Colors.green : Colors.textBlack}]}>{tab}</Text>
                                </View>
                            </TouchableWithoutFeedback>
                        );
                    })
                }
            </View>
        );
    }
}

const styles = StyleSheet.create({
    tab: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        paddingBottom: 10,
    },
    tabs: {
        height: 50,
        flexDirection: 'row',
        paddingTop: 5,
        borderWidth: 1,
        borderBottomWidth: 0,
        borderLeftWidth: 0,
        borderRightWidth: 0,
        borderTopColor: Colors.gray,
        backgroundColor: Colors.appBackground,
    },
    innerview: {
        flex: 1,
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
    },
    icon: {
        width: 22,
        height: 22,
        marginBottom: 3,
    },
    text: {
        fontSize: FontSizes.mainBar,
    },
});

export default MainTabBar;